<template>
	<view class="messageDetail">
		<view class="Box">
			<!-- 帖子内容 -->
			<view class="Message" v-if="messageInfo.avatar != ''">
				<view class="Service">
					<view class="UserInfo" @click="checkUser(messageInfo.uid)">
						<view class="Avatar">
							<image v-bind:src="'http://cdn.gdxywsw.club/' + messageInfo.avatar" />
						</view>
						<view class="NicknameAndDate">
							<view class="Nickname">
								{{ messageInfo.nickname }}
							</view>
							<view class="Date">
								<i class="el-icon-time"></i>
								{{ messageInfo.date }}
							</view>
						</view>
					</view>
					<view class="Subscribe" v-if="this.messageInfo.uid != this.userId">
						<button type="success" size="mini" v-if="subscribed == 0" @click="subscribe">关注</button>
						<button type="info" icon="el-icon-circle-check" size="mini" v-if="subscribed == 1"
							@click="cancelSubscribe">已关注</button>
					</view>
				</view>
				<view class="Title">
					{{ messageInfo.title }}
				</view>

				<view class="Content">
					{{ messageInfo.content }}
				</view>

				<view class="Images" v-if="messageInfo.images != ''" @click.stop="preview(messageInfo.images,$event)">
					<image v-for="(image, index) in messageInfo.images" lazy-load="true"
						:src="'http://cdn.gdxywsw.club/' + image" :key="index" :data-index="index" />
				</view>


				<view class="Three">
					<view>
						<uni-icons type="eye" size="18"></uni-icons>
						浏览:{{ messageInfo.views }}
					</view>
					<view>
						<uni-icons v-if="messageInfo.mark==0" type="hand-up" size="18"></uni-icons>
						<uni-icons v-else type="hand-up-filled" size="18" color="#d81e06"></uni-icons>
						点赞:{{ messageInfo.likes }}
					</view>
					<view>
						<uni-icons type="chat" size="18"></uni-icons>
						评论:{{ messageInfo.comments }}
					</view>
				</view>

			</view>
			<!-- 评论区 -->
			<commentsBox :messageUid="messageInfo.uid" :messageInfo="messageInfo" @addLikeMsg="addLikeMsg"
				@cancelLikeMsg="cancelLikeMsg"></commentsBox>

		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				messageInfo: {},
				// commentsList: [],
				// sonCommentsList: []
			};
		},
		computed: {
			...mapState('my_Info', ['userInfo'])
		},
		onLoad: function(options) {

			this.messageInfo = JSON.parse(decodeURIComponent(options.messageInfo))
		},
		created() {

		},
		mounted() {
			// this.getComments()
		},
		onPullDownRefresh() {
			this.$children[3].refresh()
		},
		methods: {
			// 查看用户
			checkUser(uid) {
				this.$router.push({
					name: "checkUser",
					params: {
						uid: uid
					},
				});
			},
			// 预览图片
			preview(images, e) {
				console.log(e);
				let imagesurl = images.map(item => {
					item = 'http://cdn.gdxywsw.club/' + item
					return item
				})
				console.log(imagesurl);
				uni.previewImage({
					urls: imagesurl,
					current: e.target.dataset.index
				})
			},

			// TODO 举报
			onClickRight() {
				Toast("暂未开放");
			},

			// 浏览量+1
			async addViews() {
				addViews(this.messageId);
			},

			// 返回帖子
			async checkMessage() {
				let res = await checkMessage(this.messageId);
				if (res.code == 2000) this.message = res.data;
				this.hasSubscribed();
			},


			//点赞帖子
			addLikeMsg() {
				this.messageInfo.mark = 1
				this.messageInfo.likes++
			},

			// 取消点赞帖子
			cancelLikeMsg() {
				this.messageInfo.mark = 0
				this.messageInfo.likes--
			},


			// 返回子评论
			async getSonComments(index, fatherId) {

				let {
					data: res
				} = await uni.$http.get('/comments/getSonComments/' + fatherId + '/' + this.userInfo.uid)
				if (res.code == 2000) {
					this.commentsList[index].sonCommentsList = res.data
				}


			},


			// 取消评论
			cancelComment() {
				this.whoNickname = "";
				this.comment.parentId = "0";
				this.comment.content = "";
				this.comment.who = "";
			},

		}
	}
</script>

<style lang="less">
	.messageDetail {
		// 
		background-color: #f8f8f8;

		.Box {
			padding-bottom: 40px;

			.Message {
				background-color: #ffffff;
				padding: 10px 10px 0 10px;

				.Service {
					display: flex;
					justify-content: space-between;


					.UserInfo {
						display: flex;

						.Avatar>image {
							width: 40px;
							height: 40px;
							border-radius: 40px;
						}

						.NicknameAndDate {
							margin-top: 3px;
							margin-left: 5px;
						}

						.Date {
							font-size: 10px;
						}
					}


				}

				.Subscribe {
					margin-top: 5px;
					margin-right: 5px;
				}

				.Title {
					font-size: 20px;
					font-weight: bolder;
					margin-bottom: 10px;
				}

				.Content {
					width: 355px;
				}

				.Images {
					background-color: #f8f8f8;
					margin-top: 5px;
				}

				.Images image {
					border-radius: 5px;
					width: 353px;
					object-fit: cover;
					border: 1px solid rgb(247, 247, 249);
				}

				.Three {
					padding: 5px 0;
					font-size: 12px;
					display: flex;
					justify-content: space-around;
				}

				.Three image {
					width: 15px;
					vertical-align: -10%;
				}

			}

		}


	}
</style>
